<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Axios -->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入Vue -->
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取数据" @click="getData()">
        <div>
            <h1>GitHub上的数据用户列表</h1>
            <ul>
                <li v-for="user in users" :key="user.id">{{user.node_id}}</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            el : "#app",
            data : {
                users: []
            },
            methods : {
                getData() {
                    // 发送AJAX请求
                    axios.get("https://api.github.com/users")
                        .then(function (result) {
                            // 把返回的数据存入users中
                            v.users = result.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            }
        })
    </script>
</body>
</html>